<script setup lang="ts">

const str1 = ref('')
const str2 = ref('')
const str3 = ref('')
const str4 = ref('')

const stringArray: string[] = [
  '保持积极心态，迎接每一个挑战。',
  '相信自己，你拥有无限的潜力。',
  '坚持梦想，勇敢追求，你一定能实现。',
  '每一天都是新的开始，珍惜并充分利用它。',
  '感恩身边的一切，它们都是你成长的助力。',
  '不要害怕失败，它是通往成功的必经之路。',
  '拥抱生活的不完美，因为它让你更加完美。',
  '微笑面对困难，你会发现它们并不可怕。',
  '善良和正直是内心最美的风景。',
  '坚持自我，你会发现自我价值。',
  '坚持理想，你会发现更大的理想。',
  '坚持努力，你会发现更大的成功。',
  '坚持信念，你会发现更加坚定的信念。',
  '坚持梦想，你会发现更大的梦想。',
  '坚持创新，你会发现更大的创新。',
  '坚持团队精神，你会发现更好的团队合作。',
  '坚持热爱生活，你会发现更加充实的生活。',
  '坚持美德，你会发现更加美丽的内心。',
  '坚持正义，你会发现更加公正的世界。',
  '坚持诚信，你会发现更加诚实的自己。',
  '坚持真诚，你会发现更加真诚的对待他人。',
  '勇敢做自己，活出最真实的自己。',
  '人生没有彩排，每一天都是现场直播，所以要活得精彩。',
  '不要等待机会，而要创造机会，成功属于那些有准备的人。',
  '每一次努力，都是为了让未来的自己感谢现在的自己。',
  '梦想不是遥不可及的，只要勇敢迈出第一步，就能逐渐靠近。',
  '挫折只是暂时的，它让你更坚强、更勇敢。',
  '学会放下过去的遗憾，珍惜眼前的美好，期待未来的希望。',
  '每一次的坚持，都会让你离目标更近一步。',
  '不要抱怨生活的不公，要相信命运会眷顾那些努力的人。',
  '每一个日出都是新的开始，每一个日落都是成长的见证。',
  '只有经历过风雨，才能更珍惜阳光下的温暖。',
  '与其羡慕别人的成功，不如努力成为让别人羡慕的人。',
  '真正的成功不是得到多少，而是付出多少，并享受付出的过程。',
  '人生就像一本书，愚者走马观花，智者细细品味。',
  '真正的幸福不在于拥有多少，而在于对拥有的感到满足。',
  '生活不是等待风暴过去，而是学会在雨中跳舞。',
  '不要为失败找借口，要为成功找方法。',
  '每一段旅程都有意义，每一次经历都是财富。',
  '你的价值不是由他人的赞美或贬低来定义的，而是由你自己的行动和态度来塑造的。',
  '人生就像一场马拉松，不在乎起点，而在乎坚持到终点的决心和毅力。',
  '每一个伟大的梦想，都始于一个勇敢的想法。',
  '不要害怕改变，因为每一次的改变都是成长的机会。',
  '真正的勇敢不是没有恐惧，而是在恐惧面前依然前行。',
  '人生的意义不在于你拥有多少，而在于你怎样使用你拥有的。',
  '每一个挑战都是一次成长的机会，每一次失败都是一次学习的经历。',
  '不要过分追求外在的认可，内心的平和与满足才是真正的成功。',
  '人生最宝贵的财富是时间，珍惜每一刻，活出精彩人生。',
  '每一次的尝试，都是对自我的一次挑战和超越。',
  '只有经历过最深的绝望，才能领略最美的风景。',
  '梦想是心中的灯塔，指引我们穿越黑暗，迎接光明。',
  '无论前方的路有多么崎岖，只要心中有光，就能照亮前行的道路,。',
  '不要等待别人的救赎，自己才是自己生命的主宰。',
  '生命中的每一次经历，都是一笔宝贵的财富，都值得我们去珍惜和感恩。',
  '梦想照亮前路，勇气引领未来。',
  '坚持就是胜利，努力就有收获。',
  '每一次尝试，都是成长的脚步。',
  '信念是心中的灯塔，指引前行。',
  '勇敢面对，无畏前行。',
  '生活不易，但值得我们去热爱。',
  '心怀希望，未来可期。',
  '心若向阳，无畏悲伤。',
  '勇敢追梦，不负时光。',
  '每一次努力，都在塑造更好的自己。',
  '心有所信，方能行远。',
  '心怀感恩，生活更精彩。',
  '不忘初心，方得始终。',
  '微笑面对，一切都会更好。',
  '相信自己，你比想象中更强大。',
  '勇敢追梦，不负青春。',
  '心中有光，不惧黑暗。',
  '每步都是成长，每次都是历练。',
  '梦想在前方，勇敢去追逐。',
  '坚持就是胜利，不放弃就有希望。',
  '心怀希望，未来无限。',
  '每一次挑战，都是自我超越的机会。',
  '相信自己，你值得更好的未来。',
  '心怀感恩，生活更甜美。',
  '微笑面对，生活更灿烂。',
  '用爱点亮人生，用勇气追寻梦想。',
  '努力前行，不负韶华。',
  '每一次努力，都是对未来的投资。',
  '心之所向，无所不成。',
  '以梦为马，不负韶华。',
  '用心感受，用爱去生活。',
  '把握当下，成就未来。',
  '勇往直前，无畏无惧。',
  '每一次经历，都是人生的财富。',
  '信念是心中的灯塔，指引你前行。',
  '以积极的态度面对人生，收获的将是无尽的美好。'
];

const index = ref(0);

import {onMounted, ref} from "vue";

onMounted(() => {
  const dialog1 = document.getElementById("dialog1")
  const dialog2 = document.getElementById("dialog2")
  const dialog3 = document.getElementById("dialog3")
  const dialog4 = document.getElementById("dialog4")

  if(dialog1 && dialog2 && dialog3 && dialog4){
    dialog1.style.opacity = "0";
    dialog2.style.opacity = "0";
    dialog3.style.opacity = "0";
    dialog4.style.opacity = "0";
  }


  let index = 0;
  function type() {
    if (index < text.length) {
      showStr.value += text.charAt(index);
      index++;
      setTimeout(type, 150); // 设置打字速度
    }
  }

  type();
})

const text = "人闲桂花落 ，" +
    "夜静春山空 。                    "
const showStr = ref('')

const numbers = () => {
  index.value = getRandomInt(0,89);
}
function getRandomInt(min: number, max: number): number {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

// 在设置中引入变量，用于追踪当前处于打字动画的对话框

// 在点击对话框时停止当前处于打字动画的对话框


const showDialog1 = () => {

  // 停止当前处于打字动画的对话框

  str1.value = ''
  str2.value = ''
  str3.value = ''
  str4.value = ''
  numbers()
  showStr.value = ''
  const person1 = document.getElementById("person1")
  const person2 = document.getElementById("person2")
  const person3 = document.getElementById("person3")
  const person4 = document.getElementById("person4")

  if(person1 && person2 && person3 && person4){
    person1.style.width = "30%";
    person1.style.height = "25%";
    person1.style.top = "15.5%"
    person1.style.left= "57.5%"

    person2.style.width = "40%";
    person2.style.height = "30%";
    person2.style.top = "40%";
    person2.style.left= "60%";

    person3.style.width = "50%";
    person3.style.height = "32%";
    person3.style.top = "50%";
    person3.style.left= "-20%";

    person4.style.width = "30%";
    person4.style.height = "25%";
    person4.style.top = "28%";
    person4.style.left= "5%";

    const dialog1 = document.getElementById("dialog1")
    const dialog2 = document.getElementById("dialog2")
    const dialog3 = document.getElementById("dialog3")
    const dialog4 = document.getElementById("dialog4")

    if(dialog1 && dialog2 && dialog3 && dialog4){
      dialog1.style.opacity = "0";
      dialog2.style.opacity = "0";
      dialog3.style.opacity = "1";
      dialog4.style.opacity = "0";
    }
  }

  let ind = 0;
  function type() {
    if (ind < stringArray[index.value].length) {
      str1.value += stringArray[index.value].charAt(ind);
      ind++;
      setTimeout(type, 80); // 设置打字速度
    }
  }
  type();
}
const showDialog2 = () => {

  showStr.value = ''
  str1.value = ''
  str2.value = ''
  str3.value = ''
  str4.value = ''
  numbers()
  const person1 = document.getElementById("person1")
  const person2 = document.getElementById("person2")
  const person3 = document.getElementById("person3")
  const person4 = document.getElementById("person4")

  if(person1 && person2 && person3 && person4) {
    person1.style.width = "25%";
    person1.style.height = "20%";
    person1.style.top = "18%"
    person1.style.left = "60%"

    person2.style.width = "45%";
    person2.style.height = "35%";
    person2.style.top = "37.5%";
    person2.style.left = "57.5%";

    person3.style.width = "50%";
    person3.style.height = "32%";
    person3.style.top = "50%";
    person3.style.left = "-20%";

    person4.style.width = "30%";
    person4.style.height = "25%";
    person4.style.top = "28%";
    person4.style.left = "5%";

    const dialog1 = document.getElementById("dialog1")
    const dialog2 = document.getElementById("dialog2")
    const dialog3 = document.getElementById("dialog3")
    const dialog4 = document.getElementById("dialog4")

    if (dialog1 && dialog2 && dialog3 && dialog4) {
      dialog1.style.opacity = "0";
      dialog2.style.opacity = "0";
      dialog3.style.opacity = "0";
      dialog4.style.opacity = "1";
    }
  }

  let ind = 0;
  function type() {
    if (ind < text.length) {
      str2.value += stringArray[index.value].charAt(ind);
      ind++;
      setTimeout(type, 80); // 设置打字速度
    }
  }
  type();
}


const showDialog3 = () => {

  showStr.value = ''
  str1.value = ''
  str2.value = ''
  str3.value = ''
  str4.value = ''
  numbers()

  const person1 = document.getElementById("person1")
  const person2 = document.getElementById("person2")
  const person3 = document.getElementById("person3")
  const person4 = document.getElementById("person4")

  if(person1 && person2 && person3 && person4) {
    person1.style.width = "25%";
    person1.style.height = "20%";
    person1.style.top = "18%"
    person1.style.left = "60%"

    person2.style.width = "40%";
    person2.style.height = "30%";
    person2.style.top = "40%";
    person2.style.left = "60%";

    person3.style.width = "55%";
    person3.style.height = "37%";
    person3.style.top = "47.5%";
    person3.style.left = "-22.5%";

    person4.style.width = "30%";
    person4.style.height = "25%";
    person4.style.top = "28%";
    person4.style.left = "5%";

    const dialog1 = document.getElementById("dialog1")
    const dialog2 = document.getElementById("dialog2")
    const dialog3 = document.getElementById("dialog3")
    const dialog4 = document.getElementById("dialog4")

    if (dialog1 && dialog2 && dialog3 && dialog4) {
      dialog1.style.opacity = "1";
      dialog2.style.opacity = "0";
      dialog3.style.opacity = "0";
      dialog4.style.opacity = "0";
    }
  }

  let ind = 0;
  function type() {
    if (ind < text.length) {
      str3.value += stringArray[index.value].charAt(ind);
      ind++;
      setTimeout(type, 80); // 设置打字速度
    }
  }
  type();

}
const showDialog4 = () => {

  showStr.value = ''
  str1.value = ''
  str2.value = ''
  str3.value = ''
  str4.value = ''
  numbers()

  const person1 = document.getElementById("person1")
  const person2 = document.getElementById("person2")
  const person3 = document.getElementById("person3")
  const person4 = document.getElementById("person4")

  if(person1 && person2 && person3 && person4) {
    person1.style.width = "25%";
    person1.style.height = "20%";
    person1.style.top = "18%"
    person1.style.left = "60%"

    person2.style.width = "40%";
    person2.style.height = "30%";
    person2.style.top = "40%";
    person2.style.left = "60%";

    person3.style.width = "50%";
    person3.style.height = "32%";
    person3.style.top = "50%";
    person3.style.left = "-20%";

    person4.style.width = "35%";
    person4.style.height = "30%";
    person4.style.top = "25.5%";
    person4.style.left = "2.5%";

    const dialog1 = document.getElementById("dialog1")
    const dialog2 = document.getElementById("dialog2")
    const dialog3 = document.getElementById("dialog3")
    const dialog4 = document.getElementById("dialog4")

    if (dialog1 && dialog2 && dialog3 && dialog4) {
      dialog1.style.opacity = "0";
      dialog2.style.opacity = "1";
      dialog3.style.opacity = "0";
      dialog4.style.opacity = "0";
    }
  }

  let ind = 0;
  function type() {
    if (ind < text.length) {
      str4.value += stringArray[index.value].charAt(ind);
      ind++;
      setTimeout(type, 80); // 设置打字速度
    }
  }
  type();

}






</script>

<template>

  <div id="building" >





    <div id="background-wrapper">
      <p class="title">{{ showStr }}</p>

      <div id="background-container">
        <img alt="" id="background-img" src="../assets/城镇背景.png">
      </div>
      <div id="main-container">

        <img src="../assets/人物1.png" class="person" id="person1" style="left: 60%;top: 18%; width: 25%; height: 20%;" @click="showDialog1">
        <img src="../assets/人物2.png" class="person" id="person2" style="left: 60%;top: 40%; width: 40%; height: 30%;" @click="showDialog2">
        <img src="../assets/人物3.png" class="person" id="person3" style="left: -20%;top: 50%; width: 50%; height: 32%;" @click="showDialog3">
        <img src="../assets/人物4.png" class="person" id="person4" style="left: 5%;top: 28%; width: 30%; height: 25%;" @click="showDialog4">

      </div>

      <div class="dialog-box">
        <img src="../assets/对话框11.png" alt="" id="dialog1"  class="dialog" style="left: 18%;top: 52%; width: 30%; height: 30%; opacity: 0;">
        <img src="../assets/对话框22.png" alt="" id="dialog2" class="dialog" style="left: 20%;top:0; width: 30%; height: 35%; opacity: 0;">
        <img src="../assets/对话框33.png" alt="" id="dialog3" class="dialog" style="left: 45%;top: 5%; width: 20%; height: 40%; opacity: 0;">
        <img src="../assets/对话框44.png" alt="" id="dialog4" class="dialog" style="left: 50%;top: 52%; width: 30%; height: 30%; opacity: 0;">

        <p class="dialog-text" >{{ str1 }}</p>
        <p class="dialog-text" style="top:57%;left:52%;width:28%;height:30%;">{{ str2 }}</p>
        <p class="dialog-text"  style="top:51%;left:25%;width:23%;height:30%;">{{ str3 }}</p>
        <p class="dialog-text" style="top:0;left:22%;width:28%;height:40%;">{{ str4 }}</p>
      </div>



    </div>





  </div>
</template>

<style scoped>

.title{
  width: 10%;
  height:32%;
  position: absolute;
  top: 5%;
  left: 49%;
  font-size: 30px;
  font-family: STXingkai,serif  ;
  font-weight: bold;
  z-index: 1;
  word-spacing: 50px;
}

.dialog-text{
  width: 20%;
  height:32%;
  position: absolute;
  top: 5%;
  left: 45%;
  font-size: 20px;
  font-family: STXingkai,serif  ;
  z-index: 1;
  word-spacing: 50px;
}


.person{
  position: absolute;
  top: 0;
  width: 35%;
  height: 30%;
}
.dialog{
  position: absolute;
  top: 0;
  width: 35%;
  height: 30%;
}





#building {
  width: 100%;
  height: 100%;
}

#background-wrapper {
  overflow-y: hidden;
  position: relative;
  width: 100%;
  height: 100%;
}

#main-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#background-container{
  width: 100%;
  height: 100%;
  position: relative;
}

#background-img {
  height: 100%;
  width: 100%;
}

</style>